<template>
    <div class="div_info_table">
        <el-table :data="product" style="width: 96%" border>
            <el-table-column prop="commodityName" label="商品名称" width="220px" align="center" >
            </el-table-column>
            <el-table-column  label="规格及参数" align="center" width="220px">
                <template >
                    <div v-for="(value, index) in info" :key="index">
                       <div v-for="(item, index1) in value" :key="index1">
                        {{ item.key }}:{{ item.value }}
                        <br>
                       </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="payNumber" label="购买数量" align="center" />
        </el-table>
        <div v-if="productTotal > 0" class="product_total">
            <span>商品总金额:</span>
            <span> ￥{{ productTotal }}</span>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ProductInfoTable',
    props: {
        //商品数据
        data:{
            type: Array,
            default: () => []
        },
        //商品价格
        price:{
            type: Number,
            default: 0
        },
        //商品参数
        infodetail:{
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
           handler(newVal) {
                this.product = newVal;
            },
            deep: true
        },
        price: {
            handler(newVal) {
                this.productTotal = newVal;
            },
            deep: true
        }
        ,
        infodetail: {
            handler(newVal) {
                this.infodetail = newVal;
            },
            deep: true
        }
    },
    created(){
        this.productTotal = this.price;
        if(this.data.length != 0){
            this.product = this.data;
        }
        console.log("答应详情")
        console.log(this.infodetail)
    },
    data() {
        return {
            product: [],
            productTotal: this.price,
            info:this.infodetail
        }
    },
}
</script>

<style scoped>
.div_info_table {
    /* margin-left: 10%; */
    width: 76%;
    margin-bottom: 5%;
    /* background-color: aquamarine; */
}

/* 表格体 */
.div_info_table>>>.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid rgba(211, 218, 230, 1);
    border-right: 1px solid rgba(211, 218, 230, 1);
    border-left: 1px solid rgba(211, 218, 230, 1);
    padding: 15px;
}

/* 表格头 */
.div_info_table>>>.el-table--border th.el-table__cell,
.el-table__fixed-right-patch {
    background-color: rgba(247, 249, 252, 1);
    /* border: 1px solid rgba(211, 218, 230, 1); */
    border-top: 1px solid rgba(211, 218, 230, 1);
    border-right: 1px solid rgba(211, 218, 230, 1);
    border-left: 1px solid rgba(211, 218, 230, 1);
    color: rgba(52, 69, 99, 1);
    padding: 5px
}



/* .div_info_table>>>.el-table--border {
    border-bottom: 1px solid rgba(211, 218, 230, 1);
} */

.div_info_table>>>.el-table {
    margin-top: 2%;
    font-size: 12px;
    margin-left: 20px;
    border: 1px solid rgba(211, 218, 230, 1);
}

.product_total {
    margin: 10px 3%;
    height: 17px;
    opacity: 1;
    /** 文本1 */
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 16.8px;
    color: rgba(52, 69, 99, 1);
    text-align: right;
    vertical-align: top;
}
</style>